<template>
	<view>
		<van-form @submit="onSubmit">
			<cu-card title="请选择纳税记录年度">
				<template v-slot:region>
					<van-field v-model="formData.year" is-link readonly name="datePicker" label="时间选择" placeholder="点击选择时间"
						@click="onShowPicker" />
				</template>
			</cu-card>
			<cu-card title="请选择所得类型">
				<template v-slot:region>
					<van-checkbox-group v-model="formData.names" @change="checkChange">
						<van-checkbox name="1">工资薪金</van-checkbox>
						<van-checkbox name="2">劳务报酬</van-checkbox>
						<van-checkbox name="3">稿酬</van-checkbox>
						<van-checkbox name="4">特许权使用费</van-checkbox>
					</van-checkbox-group>
				</template>
			</cu-card>
			<view class="handle">
				<van-button block type="primary" :disabled="formData.names.length == 0" native-type="onSubmit">
					提交
				</van-button>
			</view>
		</van-form>
		<van-popup v-model:show="showPicker" position="bottom">
			<van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" confirm-button-text="确定"
				:columns-type="columnsType" @confirm="onConfirm" @cancel="showPicker = false" />
		</van-popup>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { reactive, ref } from 'vue'
	onLoad(() => {

	})
	const formData = reactive(
		{
			year: '2024',
			names: ['1', '2', '3', '4']
		},
	)
	const currentDate = ref(['2024']);
	const columnsType = ['year'];
	const minDate = new Date(2019, 0, 1)
	const maxDate = new Date(2024, 0, 1)
	const showPicker = ref(false)
	const onShowPicker = () => {
		currentDate.value = [formData.year]
		showPicker.value = true
	}
	const onConfirm = ({ selectedValues } : any) => {
		formData.year = selectedValues[0]
		showPicker.value = false
	}
	const checkChange = (names : any[]) => {
		formData.names = names
	}
	const onSubmit = () => {
		console.log(formData)
		uni.navigateTo({ url: "/pages/detail/list" })
	}
</script>

<style scoped lang="scss">
	.van-checkbox-group {
		padding: 0rpx 0rpx 0rpx 32rpx;

		:deep(.van-checkbox) {
			padding: 20rpx 0rpx;
			border-bottom: 2rpx solid #f3f4f6;

			&:last-child {
				border-bottom: none;
			}

			.van-checkbox__label {
				font-size: 28rpx;
			}
		}
	}


	.handle {
		padding: 0rpx 32rpx;
		margin-top: 100rpx;
	}
</style>